<template>
  <div class="page-search">
    <search-form v-bind="formConfig" v-model="formData">
      <el-button type="primary" @click="getSearchVal">查询</el-button>
      <el-button @click="resetSearchVal">重置</el-button>
    </search-form>
  </div>
</template>

<script setup lang="ts" name="PageSearch">
import { IFormConfig } from './types'

const props = defineProps<{
  formConfig: IFormConfig
}>()
// 抛出事件
const emit = defineEmits(['resetBtnClick', 'queryBtnClick'])
// 获取配置文件里的 filed 字段
const formOriginData: any = {}
for (const item of props.formConfig.formItems) {
  formOriginData[item.filed] = ''
}
// 设置表单字段
const formData = ref(formOriginData)
// 重置
const resetSearchVal = () => {
  formData.value = formOriginData
  emit('resetBtnClick', {})
}
// 获取
const getSearchVal = () => {
  console.log('formData.value', formData.value)
  emit('queryBtnClick', formData.value)
}
</script>

<style scoped lang="scss"></style>
